// 设置节流指令
import { App, Directive } from "vue";

export default function setupThrottleDirective(app: App) {
  // 执行节流逻辑的函数
  // el 要绑定节流功能的元素
  // throttleTime 节流时间间隔，默认为 1000 毫秒
  function throttleELfun(el: HTMLElement, throttleTime = 1000) {
    let timer: number | null = null;

    el.addEventListener('click', (event: Event) => {
      if (!timer) {
        // 如果没有定时器，可以执行点击操作
        timer = window.setTimeout(() => {
          timer = null;
        }, throttleTime);
      } else {
        // 如果已经有定时器在等待，阻止事件传播
        event.stopImmediatePropagation();
        event.stopPropagation();
        event.preventDefault();
      }
    }, { capture: true }); // 使用捕获阶段以确保优先处理节流
  }
  //   节流指令对象
  const throttleDirective: Directive<HTMLElement> = {
    // 指令挂载时绑定节流功能
    //  el 指令绑定的元素
    mounted(el) {
      throttleELfun(el, 1000);// 默认 1000 毫秒的节流时间
    },
  };
  // 将指令注册到 Vue 应用中
  app.directive('throttle', throttleDirective);
}